<template>
    <div class="timeline-content" >
        <div class="block">
            <el-timeline >
                <el-timeline-item v-for="(activity,index) in activities"
                                  :key="index"
                                  :icon="activity.icon"
                                  :type="activity.type"
                                  :color="activity.color"
                                  :size="activity.size"
                                  :timestamp="activity.timestamp"
                                  placement="top">
                    <el-card style="width: 96%">
                        <h4 style="font-size: 18px;color: #0bbd87;font-weight: bold" >{{activity.content}}</h4>
                        <p style="margin-top: 20px;font-size: 14px;font-weight: bold" v-show="index!=0">事项完成时间 2018/4/12 20:46 </p>
                    </el-card>
                </el-timeline-item>
            </el-timeline>
        </div>

    </div>
</template>
<script>
    export default {
        data() {
            return {
                activities: [{
                    content: ' 武进国家农村产业融合发展示范园,（花木交易中心）',
                    // timestamp: '2018-04-12 20:46',
                    size: 'large',
                    type: 'primary',
                    icon: 'el-icon-more',
                    color:'#0bbd87'

                },{
                    content: '启动土地出让程序',
                    timestamp: '2018-04-12 20:46',

                    color:'#0bbd87'
                }, {
                    content: '建设用地使用权拍卖挂牌',
                    timestamp: '2018-04-03 20:46',
                    color: '#0bbd87'
                }, {
                    content: '项目备案',
                    timestamp: '2018-04-03 20:46',
                    size: 'large',
                    color:'#0bbd87'
                }, {
                    content: '建设用地规划许可',
                    timestamp: '2018-04-03 20:46'
                    ,
                    color:'#0bbd87'
                },
                    {
                        content: '环境影响报告审批',
                        timestamp: '2018-04-03 20:46'
                        ,
                        color:'#0bbd87'
                    },
                    {
                        content: '水土保持方案审批/占用水域审批',
                        timestamp: '2018-04-03 20:46'
                        ,
                        color:'#0bbd87'
                    },
                    {
                        content: '建设工程规划许可审查',
                        timestamp: '2018-04-03 20:46'
                        ,
                        color:'#0bbd87'
                    },
                    {
                        content: '应建防空地下室民用建筑项目报建审批',
                        timestamp: '2018-04-03 20:46'
                        ,
                        color:'#0bbd87'
                    },
                    {
                        content: '建设工程消防设计审核',
                        timestamp: '2018-04-03 20:46'
                        ,
                        color:'#0bbd87'
                    },
                    {
                        content: '建筑工程施工许可',
                        timestamp: '2018-04-03 20:46'
                        ,
                        color:'#0bbd87'
                    },
                    {
                        content: '事中事后监管（人防、消防、市政、园林...）',
                        timestamp: '2018-04-03 20:46'
                        ,
                        color:'#0bbd87'
                    },
                    {
                        content: '竣工核实',
                        timestamp: '2018-04-03 20:46'
                        ,
                        color:'#0bbd87'
                    },
                    {
                        content: '项目归档',
                        timestamp: '2018-04-03 20:46'
                        ,
                        color:'#0bbd87'
                    }
                ]
            };
        }
    };
</script>
<style lang="scss" scoped>
    .timeline-content{
        width: 25%;
        height:96%;
        position: absolute;
        padding: 0;
        opacity: 1;
        z-index: 2;
        right: 1%;
        bottom: 2%;
        background: white;
        color: white;
        border: 0;
        transition: opacity 100ms ease-in;
        display: flex;
        flex-direction: column;
        overflow: auto;

    }
.block{
    margin-top: 15px;
    margin-left: 15px;
    font-size: 16px;
}
    .el-timeline-item__timestamp {
        color: #909399;
        line-height: 1;
        font-size: 16px;
    }
</style>
